<template>
  <div class="box">
    <h2>Son1 子组件 {{ count }}</h2>
    从vuex中获取的值: <label></label>
    <br />
    <!--  错误代码(vue默认不会监测，监测需要成本) -->
    <!-- <button @click="$store.state.count++">值 + 1</button> -->
    <button @click="$store.commit('addCount')">值 + 1</button>
    <button @click="$store.commit('addCountValue', 5)">值 + 5</button>
    <button @click="$store.dispatch('setAsyncCount', 666)">
      一秒后改为666
    </button>
    <hr />
    <p>{{ $store.state.list }}</p>
    <p>{{ $store.getters.filterList }}</p>
    <hr />
    <!-- 直接访问子模块数据 -->
    <div>
      <div>{{ $store.state.user.userInfo.name }}</div>
      <div>{{ $store.state.setting.desc }}</div>
    </div>

    <!-- 测试访问模块中的getters - 原生 -->
    <div>{{ $store.getters["user/UpperCaseName"] }}</div>

    <button
      @click="
        $store.commit('user/setUser', {
          name: 'xiaowang',
          age: 20,
        })
      "
    >
      更新个人信息
    </button>

    <button @click="$store.commit('setting/setTheme', 'pink')">更新主题</button>

    <hr />
    <button
      @click="
        $store.dispatch('user/setUserSecond', {
          name: 'xiaohong',
          age: 28,
        })
      "
    >
      1秒后更新个人信息
    </button>
  </div>
</template>

<script>
export default {
  name: "Son1Com",
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
